<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul, li {
      list-style: none;
    }

    .header, .footer, .content, .pagination {
      width: 1200px;
      margin: 0 auto;
    }

    .header, .footer {
      height: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: skyblue;
      color: #fff;
      font-size: 50px;
      font-weight: 700;
    }

    .footer {
      height: 300px;
    }

    .pagination {
      height: 30px;
      display: flex;
      align-items: center;
    }

    .content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .content > li {
      height: 400px;
      width: 280px;
      border: 1px solid #333;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-bottom: 10px;
    }

    .content > li > img {
      width: 280px;
      height: 280px;
      border-bottom: 1px solid #333;
    }
  </style>
</head>
<body>

  <div class="header">网页头部</div>
  <p class="pagination">
    <button>上一页</button>
    <span class="total">1 / 100</span>
    <button>下一页</button>
    <select>
      <option value="12">12</option>
      <option value="16">16</option>
      <option value="20">20</option>
      <option value="24">24</option>
    </select>
    <input class="search" type="text">
  </p>
  <ul class="content">
    <!-- <li>
      <img src="" alt="">
      <p>介绍</p>
      <p>价格</p>
    </li> -->
  </ul>
  <div class="footer">网页底部</div>
 <script>
   //1 .获取元素 

   let prevbtn = document.querySelector('button:nth-of-type(1)');
   let nextbtn = document.querySelector('button:nth-of-type(2)');
   let totalSpan =  document.querySelector('.pagination > .total');
   let selectBox = document.querySelector('.pagination > select');
   let searchBox = document.querySelector('.search');
   let ulEle = document.querySelector('.content');

   // 2准备变量  
   let current = 1; //当前页
   let pagesize = 12; // 每页显示的条数
   let total = 0; // 总页数 
   let search = '';

   // 先获取总的数据   通过ajax 获取总数据  
   getData();
   function getData(){
      const xhr = new XMLHttpRequest();
      xhr.open('get',`http://localhost:8080/goods/list?search=${search}&current=${current}&pagesize=${pagesize}`);

      xhr.onload = function() {
          const res = JSON.parse(xhr.responseText);
          total = res.total; //总页数  

          bindHTML(res.list);
      }

      xhr.send()
   }

   // 从总数据中提炼数据 渲染到页面上   
   function bindHTML(list){
      // console.log(list);
      // 遍历list   每个元素是个对象  
      // 每个对象 一个li   然后 多个li 拼接在一起 
      // 最后统一放到ul中  
      ulEle.innerHTML = list.reduce(function(prev,item){
          return prev+ `<li>
      <img src="${item.img_big_logo}" alt="">
      <p>${item.title}</p>
      <p>￥：${item.current_price}</p>
    </li>
      `
      },'')

      totalSpan.innerText= `${current}/ ${total}`

   }

   prevbtn.onclick = function(){
      // alert(123);
      if(current<=1){
          return 
      }
      current--;
      getData();
   }


   nextbtn.onclick = function(){
      // alert(456);
      if(current>=total){
          return 
      }
      current++;
      getData();
   }

   selectBox.onchange=function(){
      current = 1
      pagesize = this.value;
      getData();
   }


  //  searchBox.oninput=function(){
  //     search = this.value.trim();
  //     getData();

  //  }

   // 函数节流  


   // 下一个事件处理函数必须等到行一个执行完毕以后才触发 

  //  searchBox.oninput=(function(flag){
  //      return function(){
  //         if(flag == false) return;
  //         //只要走到这里 说明开关是开着的 我们需要把开关关上
  //         //防止其它时间处理函数执行
  //         flag = false;
  //         setTimeout(()=>{
  //           search = this.value.trim();
  //           getData();
  //           flag = true
  //         },300);

  //      }
  //  })(true)


  // 防抖  
      searchBox.oninput = (function(timer){
          return function(){
              clearTimeout(timer);

              timer = setTimeout(()=>{
                search = this.value.trim();
                getData();
              },300);
          }
      })()
 </script>
</body>

</html>